<template>
  <div id="app">
    <el-container>
      <el-aside style="width: auto">
        <!-- 侧边栏导航 -->
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          v-if="$store.state.menu.menu && $store.state.user.info"
        >
          <el-menu-item index="/">
            <!--disabled 禁用 -->
            <i class="el-icon-s-home"></i>
            <span slot="title">首页 </span>
          </el-menu-item>

          <el-submenu
            :index="i.path"
            v-for="i in $store.state.menu.menu"
            :key="i.uid"
          >
            <template slot="title">
              <i :class="icontype[i.id]"></i>
              <span slot="title">{{ i.name }}{{ i.path }}{{ i.id }} </span>
            </template>

            <el-menu-item
              :index="a.path"
              v-for="a in i.children"
              :key="a.uid"
              :disabled="
                $store.state.user.info.permissions.indexOf(a.path) == -1
              "
            >
              <!--disabled 禁用 -->
              <i :class="icontype[a.id]"></i>
              <span slot="title">{{ a.name }}{{ a.path }}{{ a.id }} </span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <!-- 侧边栏导航 -->
      </el-aside>
      <el-main v-if="$store.state.user.info && $store.state.user.menulist">
        <div style="height: 50px; line-height: 50px; background-color: #ccc">
          <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-radio-group
                  v-model="isCollapse"
                  style="margin-bottom: 20px"
                >
                  <el-radio-button :label="false">展开</el-radio-button>
                  <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="text-align: right; padding-right: 40px">
                当前账号：
                <router-link to="/info" style="color: blue">
                  {{ $store.state.user.info.profile.name }}
                </router-link>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="padding: 20px">
          <!-- v-if="$store.state.user.info"  不知道   -->
          <!-- {{$store.state.user.info.permissions.indexOf('/dict')}} -->
          <router-view> </router-view>
          <!-- 内容
          {{ $store.state.user.info.profile }} -->
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { http, listForRouter, info, menulist } from "./api/api";
export default {
  name: "app",
  data() {
    return {
      isCollapse: false,
      icontype: {
        1: "el-icon-setting",
        2: "el-icon-tickets",
        4: "el-icon-user",
        12: "el-icon-s-custom",
        21: "el-icon-s-check",
        17: "el-icon-menu",
        22: "el-icon-collection",
        41: "el-icon-s-order",
        46: "el-icon-document-add",
        42: "el-icon-document",
        45: "el-icon-folder-opened",
      },
    };
  },
  methods: {
    // 获取操作功能信息  mgr
    getlist() {
      this.$http.get(http + menulist).then(
        (data) => {
          // console.log(data.data.data)
          var data = data.data.data;
          var json = {};
          // 循环父级
          for (var i = 1; i < data.length; i++) {
            // 循环子集
            var child = data[i].children;
            for (var a = 0; a < child.length; a++) {
              // console.log(child[a])
              this.$set(json, child[a].url, child[a].children);
            }
          }
          console.log(json);
          //把json 存储到vuex
          this.$store.commit("setmenulist", json);
          // console.log(data)
        },
        (err) => {
          // location.href = "/login.html";
          this.$message.error(err.data.message);
        }
      );
    },
    // 获取导航  菜单信息
    getmenu() {
      this.$http.get(http + listForRouter).then(
        (data) => {
          // console.log(data)
          // console.log(this.$store)
          //修改导航状态树
          this.$store.commit("setmenu", data.data.data);
        },
        (err) => {
          // location.href = "/login.html";
          this.$message.error(err.data.message);
        }
      );
    },
    //获取当前账号信息
    getinfo() {
      this.$http.get(http + info).then(
        (data) => {
          // console.log(data.data)
          //修改当前账号信息
          this.$store.commit("setinfo", data.data.data);
        },
        (err) => {
          // location.href = "/login.html";
          this.$message.error(err.data.message);
        }
      );
    },
  },
  mounted() {
    this.getmenu();
    this.getinfo();
    this.getlist();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-aside .el-menu-vertical-demo {
  min-height: 827px;
  border-right: 1px lime solid;
}
.el-main {
  padding: 0;
}
</style>
